import 'package:flutter/material.dart';

class MyApp5 extends StatelessWidget {
  const MyApp5({super.key});

  @override
  Widget build(BuildContext context) {
    final screen = MediaQuery.of(context).size;
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text(
          'Container组件',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      //主题区域
      body: Center(
        child: Container(
          // width: screen.width, //占满整行
          // height: screen.height, //占满整列
          width: 300,
          height: screen.height / 3,
          // color: Colors.green,  //decoration存在时 color要写在decoration里面
          decoration: BoxDecoration(
            //背景颜色
            color: Colors.green,
            // borderRadius: BorderRadius.circular(10), //设置四个角的圆角
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
            ), //设置单独某个圆角
            //边框
            border: Border.all(color: Colors.teal, width: 10), //设置四周的边框
            // border: Border(top: BorderSide(color: Colors.red, width: 5)),//设置单个的边框
          ),
          child: Container(
            //设置内容的对齐方式
            // alignment: Alignment.centerRight,
            alignment: Alignment.center, //水平垂直居中
            margin: const EdgeInsets.all(20), //所有的外边距一起设置
            // margin: EdgeInsets.only(top: 20, left: 40), //单独设置某一方向的边距
            padding: const EdgeInsets.all(20), //所有的内边距一起设置
            color: Colors.yellow,
            child: const Text('我是一个Container'),
          ),
        ),
      ),
    );
  }
}
